<template>
    <div class="hot">
        <div class="hot-left">
            <div class="left-counter">
                <div class="limit">限时抢购</div>
                <div class="count">
                    距结束 <em>02</em>: <em>04</em>: <em>08</em>
                </div>
            </div>
            <div class="left-content" 
                v-for="item of hotContentList"
                :key="item.id"
                >
                <div class="content-img">
                    <img :src="item.imgUrl">
                </div>
                <div class="content-desc">
                   {{item.desc}}
                </div>
            </div>
            <div class="left-prise" 
                v-for="item of hotPriseList"
                :key="item.id"
                >
                <div class="prise-sale">
                    限量<span>{{item.num}}份</span>
                </div>
                <div class="prise-num">
                    <em>¥</em>
                    <span>
                    {{item.prise}}
                    </span>
                    起
                </div>
            </div>
        </div>
        <div class="hot-right">
            <div class="right-item" 
                 v-for="item of hotTrendList"
                :key="item.id"
            >
                <div class="item-desc">
                    <p>{{item.desc}}</p>
                    <em>{{item.crite}}</em>
                </div>
                <div class="item-img">
                    <img class="img" :src="item.imgUrl" alt="">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default{
    name: 'homeHot',
    props: {
        hotPriseList: Array,
        hotTrendList: Array,
        hotContentList: Array
    },
    data(){
        return {
            hotTrendList: [
                {
                    id: '00000001',
                    desc: '快乐寒假',
                    crite: '亲子旅行记',
                    imgUrl: 'https://pic5.40017.cn/01/000/4f/2e/rBLkBltDN7CAdhIIAACfHPmLock611_100x100_00.png'
                },
                {
                    id: '00000002',
                    desc: '快乐寒假',
                    crite: '亲子旅行记',
                    imgUrl: 'https://pic5.40017.cn/01/000/4f/2e/rBLkBltDN7CAdhIIAACfHPmLock611_100x100_00.png'
                }
            ],
            hotPriseList: [
                {
                    id: '00000001',
                    num: '200',
                    prise: '280'
                }
            ],
            hotContentList: [
                {
                    id: '000001',
                    imgUrl: 'https://pic3.40017.cn/zzy/rimage/2015/03/17/11/IOVcqb_100x100_00.jpg',
                    desc: '高级标准房1晚+三国、水浒城门票2张'
                }
            ]
        }
    }
}
</script>

<style lang="scss" scoped>
.hot{
    font-size: 14px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: #fff;
    border-bottom: 10px solid #edf0f5;
    height: 160px;
    .hot-left{
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        border-right: 1px solid #e4e4e4;
        padding: 16px 8px 20px;
        box-sizing: border-box;
        color: #333;
        .left-counter{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            .limit{
                width: 60px;
                height: 21px;
            }
            .count{
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                font-size: 10px;
                em:first-child {
                    margin-left: 3px;
                }
                em{
                    display: block;
                    width: 15px;
                    height: 12px;
                    line-height: 12px;
                    background: #262626;
                    border-radius: 2px;
                    color: #fff;
                    font-style: normal;
                    text-align: center;
                    font-size: 10px;
                }
            }
        }
        .left-content{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            margin-top: 10px;
            .content-img{
                img{
                    display: block;
                    width: 50px;
                    height: 50px;
                    margin-right: 8px;
                    -webkit-box-flex: 0;
                    -ms-flex: none;
                    flex: none;
                    opacity: 1!important;
                }
            }
            .content-desc{
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
            }
        }
        .left-prise{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin-top: 4px;
            .prise-sale{
                color: #666;
                font-size: 12px;
            }
            .prise-num{
                text-align: bottom;
                color: #999;
                font-size: 12px;
                em{
                    font-style: normal;
                    color: #ff5346;
                }
                span{
                    display: inline-block;
                    font-size: 20px;
                    color: #ff5346;
                    font-weight: 700;
                }
            }
        }
    }
    .hot-right{
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        .right-item{
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            border-bottom: 1px solid #e4e4e4;
            padding-left: 8px;
            box-sizing: border-box;
            .item-desc{
                float: left;
                -webkit-box-flex: 1;
                -ms-flex: auto;
                flex: auto;
                p{
                    font-size: 14px;
                    font-weight: 700;
                }
                em{
                    font-style: normal;
                    color: #999;
                    font-size: 12px;    
                }
            }
            .item-img{
                width: 70px;
                height: 70px;
                -webkit-box-flex: 0;
                -ms-flex: none;
                flex: none;
                float: right;
                img{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
</style>